﻿<template>
    <div class="app-view task-class">
        <div class="elscrollbar_gg" :style="{'height': (tableH-20) + 'px'}">
            <el-row :gutter="20" style="height:180px">
                <el-col :span="9">
                    <el-descriptions element-loading-background="rgba(0, 0, 0, 0)"
                                     :title="taskTitle"
                                     :column="1"
                                     border
                                     :labelStyle="{'width': '100px'}"
                                     :contentStyle="{'width': elWidth1 + 'px'}">
                        <el-descriptions-item v-for="item of items1" :key="item.value" :label="item.label">
                            <div>
                                {{ taskInfo[item.value] }}
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <el-col :span="15">
                    <div style="display:flex" v-loading="loading">
                        <el-button type="primary" size="mini" style="margin: 0px 0px 0px 80px; position: absolute;" @click="saveScene">保存</el-button>
                        <el-descriptions element-loading-background="rgba(0, 0, 0, 0)"
                                         title="任务场景"
                                         :column="1"
                                         border
                                         :labelStyle="{'width': '100px'}"
                                         :contentStyle="{'width': elWidth2 + 'px'}">
                            <el-descriptions-item v-for="item of items2" :key="item.value" :label="item.label">
                                <div style="display:flex;" v-if="item.value === 'taskScene'">
                                    <el-input v-model="taskScene" size="mini" placeholder="请输入任务场景" clearable type="textarea" resize="none" :autosize="{minRows: 6, maxRows: 6}" />
                                    <div @click="editImage" v-loading="imgLoading" style="margin-left:20px">
                                        <el-carousel style="width: 300px; height: 122px; ">
                                            <div style="position: relative; top: 50px; text-align: center" v-if="fileList.length === 0">
                                                暂无图片,点击上传
                                            </div>
                                            <el-carousel-item v-for="item in fileList" :key="item" style="margin:auto">
                                                <el-image :src="item.url" fit="contain" style="width: 100%;height: 100%;"></el-image>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                </div>
                                <div v-else>
                                    {{ taskInfo[item.value] }}
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                        
                    </div>
                </el-col>
                <!--<el-col :span="6">
                    <div style="">
                        <div style="min-width: 70px; margin-left: 100px; font-weight: 700; font-size: 16px; font-family: 'Noto Sans SC'; color: #303133; ">场景图片</div>
                        
                    </div>
                </el-col>-->
            </el-row>
                    <!--<el-row :gutter="20" >
                        <el-col :span="6">
                            <div @click="editImage" v-loading="imgLoading">
                                <el-carousel style="width: 290px;height:180px;margin:auto">
                                    <div style="position: relative; top: 50%; text-align: center" v-if="fileList.length === 0">
                                        暂无图片,点击上传
                                    </div>
                                    <el-carousel-item v-for="item in fileList" :key="item">
                                        <el-image :src="item.url" fit="contain" style="width: 100%;height: 100%;"></el-image>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div style="display:flex" v-loading="loading">
                                
                                <el-descriptions element-loading-background="rgba(0, 0, 0, 0)"
                                                 title="任务场景"
                                                 :column="1"
                                                 border
                                                 :labelStyle="{'width': '100px'}"
                                                 :contentStyle="{'width': elWidth + 'px'}">
                                    <el-descriptions-item v-for="item of items2" :key="item.value" :label="item.label">
                                        <div style="display:flex;" v-if="item.value === 'taskScene'">
                                            <el-input v-model="taskScene" size="mini" placeholder="请输入任务场景" clearable type="textarea" :rows="3" />
                                            <el-button type="primary" size="mini" style="margin-left:5px" @click="saveScene">保存</el-button>
                                        </div>
                                        <div v-else>
                                            {{ taskInfo[item.value] }}
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>-->

                    <el-row :gutter="20" :style="{'height': (tableH - 220) + 'px'}">
                        <el-col :span="6">
                            <subtask ref="subtask" :tableH="tableH-220" :taskInfo="taskInfo" @selectSubTask="selectSubTask"></subtask>
                        </el-col>
                        <el-col :span="18" style="height:100%">
                            <div class="task-parameters" style="height:100%;overflow:auto">
                                <div>
                                    <processParameters ref="processParameters" :taskInfo="taskInfo" :subTaskInfo="subTaskInfo" :bedOption="bedOption"></processParameters>
                                </div>
                                <div style="margin-top:15px">
                                    <jobParameters ref="jobParameters" :tableH="150" :taskInfo="taskInfo" :subTaskInfo="subTaskInfo" :bcdOption="bcdOption"></jobParameters>
                                </div>
                                <div style="margin-top:15px">
                                    <testResult ref="testResult" :tableH="tableH-250" :taskInfo="taskInfo" :subTaskInfo="subTaskInfo"></testResult>
                                </div>
                            </div>

                        </el-col>
                    </el-row>
                    <!--<el-tabs v-model="activeTab" type="border-card" style="margin-top: 15px;">
                <el-tab-pane label="试验参数" :name="1">
                    <div>
                        <jobParameters ref="jobParameters" v-if="activeTab === 1" :tableH="130" :taskInfo="taskInfo"></jobParameters>

                    </div>
                    <div style="margin-top:15px">
                        <processParameters ref="processParameters" v-if="activeTab === 1" :tableH="tableH-400" :taskInfo="taskInfo"></processParameters>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="试验结果" :name="2">
                            <testResult ref="testResult" v-if="activeTab === 2" :tableH="tableH-250" :taskInfo="taskInfo"></testResult>
                </el-tab-pane>
            </el-tabs>-->
        </div>

        <el-dialog v-dialogDrag title="图片" :visible.sync="showImage" width="1100px" :z-index="1000" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-upload ref="UpLoad"
                       action="uploadUrl"
                       multiple="true"
                       :limit="limit"
                       :auto-upload="false"
                       :file-list="fileList"
                       :class="{hide:hideUpload}"
                       :on-change="beforeAvatarUpload"
                       :on-exceed="masterFileMax"
                       :on-preview="handlePictureCardPreview"
                       :on-remove="handleRemove"
                       :before-remove="beforeRemove"
                       :http-request="imgUpload"
                       list-type="picture-card"
                       accept=".jpg,.png,.gif,.bmp">
                <i class="el-icon-plus"></i>
                <div slot="tip" class="form-tips" style="margin-top: 10px">
                    <el-tag type="warning">最多上传5张图片</el-tag>
                </div>
            </el-upload>
            <el-dialog v-dialogDrag :visible.sync="dialogVisibles" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">关 闭</el-button>
                <!--<el-button type="primary" @click="close">确 定</el-button>-->
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import prjAPI from '../../request/Project/PrjAPI.js';
    import template from '../../common/json/template.js';
    import processParameters from './components/ProcessParameters.vue';
    import jobParameters from './components/JobParameters.vue';
    import testResult from './components/TestResult.vue';
    import baseAPI from '../../request/Base/BaseAPI.js';
    import subtask from './components/Subtask.vue';
    export default {
        components: {
            processParameters,
            jobParameters,
            testResult,
            subtask
        },
        data() {
            return {
                imgLoading: false,
                showImage: false,
                uploadUrl: '',
                dialogVisibles: false,  //控制浏览图片的对话框显示隐藏
                hideUpload: false,   // 判断是否隐藏上传按钮
                limit: 5,
                elWidth1: window.innerWidth * 0.33-110,
                elWidth2: window.innerWidth * (15/24)-110,
                fileList: [
                   
                ],
                taskScene: '',
                fileType:0,
                file: {},
                dialogImageUrl: '',   //浏览图片的路径
                template,
                tableH: window.innerHeight,
                canEdit: false,
                activeTab: 1,
                loading: false,
                taskInfo: {},
                subTaskInfo: {},
                taskTitle: '试验任务基本信息',
                taskTypeList: [],
                items1: [
                    { label: '所属项目', value: 'prjName' },
                    { label: '任务编号', value: 'taskCode' },
                    { label: '客户', value: 'customerName' },
                    { label: '任务名称', value: 'taskName' },
                ],
                items2: [
                    { label: '任务场景', value: 'taskScene' },
                ],
                bcdOption: [],
                bedOption:[],
            };
        },
        async mounted() {
            this.taskInfo = JSON.parse(this.$route.query.taskInfo);
            this.taskScene = this.taskInfo.taskScene;
            this.uploadUrl = requestURL + '/TestTaskFileUpDnld/Upload/';
            var taskTypeName = template.taskTypeOption.find(x => x.value === this.taskInfo.testType);
            taskTypeName ? this.taskTitle = taskTypeName.label + '试验任务基本信息' : '';
            document.title = this.taskInfo.taskName + ' - 试验任务详情';
            this.getImgList();
            await this.getAllBCDList();
            await this.getAllBEDList();
            console.log(this.taskInfo)
            //this.loading = true;
            //this.getInfo();
            var _this = this;
            window.onresize = () => {
                return (() => {
                    _this.tableH = window.innerHeight;
                })();
            };
            //document.addEventListener('visibilitychange', this.visibilityChange);
        },
        beforeDestroy() {
            window.onresize = null;
            //document.removeEventListener('visibilitychange', this.visibilityChange);
        },
        created() {
        },
        methods: {
            visibilityChange() {
                if (document.visibilityState == 'visible') {
                    this.loading = true;
                    this.getInfo(true);
                }
            },
            getAllBCDList() {
                return new Promise((resolve, reject) => {
                    this.bcdOption = [];
                    baseAPI.getAllBCDList().then(res => {
                        this.bcdOption = res.filter(y => y.isDelete == 0).map(x => {
                            return { label: x.bcdName, type: x.bcdType, value: x.bcdid }
                        });
                        resolve();
                    }).catch(() => {
                        resolve();
                    });
                });
            },
            getAllBEDList() {
                return new Promise((resolve, reject) => {
                    this.bedOption = [];
                    baseAPI.getAllBEDList().then(res => {
                        this.bedOption = res.filter(y => y.isDelete == 0).map(x => {
                            return { label: x.bedName, value: x.bedid }
                        });
                        resolve();
                    }).catch(() => {
                        resolve();
                    });
                });
            },
            saveScene() {
                this.taskInfo.taskScene = this.taskScene;
                this.loading = true;
                prjAPI.updateTask(this.taskInfo).then(res => {
                    this.$message({ type: 'success', message: '保存成功' });
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                });
            },
            selectSubTask(data) {
                if (data) {
                    if (!this.subTaskInfo.sTaskID || this.subTaskInfo.sTaskID != data.sTaskID) {
                        this.subTaskInfo = data;
                        //this.$refs.processParameters.getData(0);
                        //this.$refs.jobParameters.getData(0);
                        //this.$refs.testResult.getData(0);
                    }
                } else {
                    this.subTaskInfo = {};
                }
            },
            getImgList() {
                this.fileList = [];
                this.imgLoading = true;
                prjAPI.getTestTaskFiles({ taskID: this.taskInfo.taskID }).then(res => {
                    this.fileList = res;
                    this.imgLoading = false;
                }).catch(() => {
                    this.imgLoading = false;
                })
            },
            editImage() {
                this.showImage = true;
            },
            close() {
                this.showImage = false;
                this.getImgList();
            },
            //上传图片，新增到图片列表
            beforeAvatarUpload(file, fileList) {
                var format = file.name.replace(/.+\./, "");  //获取文件后缀名
                if (format === 'jpg' || format === 'png' || format === 'bmp' || format === 'gif') {  //限制导入文件格式
                    this.file = file;
                    this.$refs.UpLoad.submit(); // 调用手动上传方法
                } else {
                    this.$message({ type: 'warning', message: '暂时只支持.jpg/.png/.gif/.bmp格式的图片' });
                    this.$refs.UpLoad.clearFiles();
                    this.getImgList();
                }

            },
            imgUpload(row) {
                if (this.file.uid === row.file.uid) {
                    var obj = {
                        id: this.taskInfo.taskID,
                        filetype: this.fileType
                    };
                    var form = new FormData();
                    form.append('filename', row.file);
                    console.log(row, form)
                    var imageUpload = params => {
                        return axios.post(this.uploadUrl + JSON.stringify(obj), params, {
                            headers: { 'content-type': 'multipart/form-data', 'Authorization': sessionStorage.getItem('token') }
                        })
                    };
                    imageUpload(form).then(res => {
                        this.$message({ type: 'success', message: '文件上传成功' });
                        this.fileList.push(this.file);
                        //this.$refs.UpLoad.clearFiles();

                    }).catch(err => {
                        this.$message({ type: 'warning', message: '文件上传失败' });
                    })
                }
            },
            beforeRemove(file, fileList) {
                this.$confirm('是否删除该图片?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //执行删除操作
                    this.handleRemove(file, fileList);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                return false;
            },
            //删除图片，更新图片列表
            handleRemove(file, fileList) {
                var params = [];
                params.push(file.taskfid)
                prjAPI.deleteTestResFile(params).then(res => {
                    this.$message({ type: 'success', message: '删除成功!' });
                    this.fileList.splice(this.fileList.findIndex(x => x.uid === file.uid), 1)
                    //if (!res) {
                    //    this.$message({ type: 'warning', message: '删除失败!' })
                    //} else {
                        
                    //}
                }).catch(() => {
                })
            },
            //图片浏览
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogVisibles = true
            },
            //限制多少张图片
            masterFileMax(files, fileList) {
                this.$message.warning(`请最多上传 ${this.limit} 个文件。`)
            },
            preview() {
                //var row = this.workCardInfo;
                //if (!window.SpireCloudEditor) {
                //    this.$message({ type: 'error', message: '当前不支持预览,已为您下载!' });
                //    this.download(row);
                //    return;
                //};
                //GetEditorType(row.fileName).then(res => {
                //    let routeUrl = this.$router.resolve({
                //        name: 'FileView',
                //        query: {
                //            fileName: row.fileName,
                //            fileURL: sysFileUrl.GR + row.fileUrl,
                //            keyValue: nanoid(12),
                //            editorType: res,
                //            mode: 'view'
                //        }
                //    });
                //    window.open(routeUrl.href, routeUrl.href);
                //}).catch(() => {
                //    this.$message({ type: 'warning', message: '此类型文件无法通过系统预览，请下载后使用相应软件打开' });
                //});
            },
            download(row) {
                prjAPI.downLoadTestResFile(row.taskFID).then((res) => {
                    const blob = new Blob([res], { type: "text/plain;charset=utf-8" });
                    if ("download" in document.createElement("a")) {
                        // 非IE下载
                        const elink = document.createElement("a");
                        elink.download = row.fileName;
                        elink.style.display = "none";
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href);
                        document.body.removeChild(elink);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, row.fileName);
                    }
                });
            },
            
            toDate(date) {
                return date ? moment(date).format('YYYY-MM-DD') : '';
            },
            format(ops, op, hasops) {
                var val = null;
                if (hasops) {
                    var options = ops
                        .map((e) => {
                            return e.options;
                        })
                        .flat()
                        .valueOf();
                    val = options.find((e) => e.value === op);
                } else {
                    val = ops.find((e) => e.value === op);
                }
                return val ? val.label : "";
            },
        },
        template: `#template`
    };
</script>
